<template>
  <div class="my">
    <div class="bg-f flex" style="margin-top:24px;padding: 15px;">
      <div class="" style="width: 40px;height: 40px;margin-right: 13px;">
        <img :src="user.avatar">
      </div>
      <div class="">
        <div class="" style="margin-bottom: 9px;font-size: 15px;color: #000000;font-weight: bold;font-family: auto;">
          {{user.name}}
        </div>
        <div class="" style="font-size: 12px;color: #BBBBBB;font-weight: bold;font-family: auto;">
          {{user.phone}}
        </div>
      </div>
    </div>
    <div class="bg-f" style="margin-top: 15px;height: 148px;border-radius: 5px;">
      <van-cell style="">
        <!-- 使用 title 插槽来自定义标题 -->
        <template #title>
          <div class="flex-align">
            <img src="../../assets/newmy/user@2x.png" style="width: 22px;height: 22px;margin-right: 15px;">
            <span id="" style="font-size: 14px;color: #292929;font-weight: 500;font-family: auto;">
              用户名：{{user.name}}
            </span>
          </div>
        </template>
      </van-cell>
      <van-cell style="" is-link>
        <!-- 使用 title 插槽来自定义标题 -->
        <template #title>
          <div class="flex-align" @click="seleword">
            <img src="../../assets/newmy/password@2x.png" style="width: 22px;height: 22px;margin-right: 15px;">
            <span id="" style="font-size: 14px;color: #292929;font-weight: 500;font-family: auto;">
              修改密码
            </span>
          </div>
        </template>
      </van-cell>
      <!-- <van-cell style="" is-link>
        <template #title>
          <div class="flex-align" @click="selemessage">
            <img src="../../assets/newmy/password@2x.png" style="width: 22px;height: 22px;margin-right: 15px;">
            <span id="" style="font-size: 14px;color: #292929;font-weight: 500;font-family: auto;">
              修改用户信息
            </span>
          </div>
        </template>
      </van-cell> -->
      <van-cell style="" is-link>
        <!-- 使用 title 插槽来自定义标题 -->
        <template #title>
          <div class="flex-align" @click="givepay">
            <img src="../../assets/newmy/Withdrawal@2x.png" style="width: 22px;height: 22px;margin-right: 15px;">
            <span id="" style="font-size: 14px;color: #292929;font-weight: 500;font-family: auto;">
              提现申请
            </span>
          </div>
        </template>
      </van-cell>
    </div>

    <div class="bg-f" style="margin-top: 15px; border-radius: 5px;">
      <van-cell class="flex-c" style="height: 62px;" is-link>
        <!-- 使用 title 插槽来自定义标题 -->
        <template #title>
          <div class="flex-align" @click="wxlogin">
            <img src="../../assets/newmy/wechat@2x.png" style="width: 22px;height: 22px;margin-right: 15px;">
            <span id="" style="font-size: 14px;color: #292929;font-weight: 500;font-family: auto;">
              绑定微信号
            </span>
          </div>
        </template>
      </van-cell>
    </div>
    <div class="flex-c" @click="outlogo" style="background: #0580FF;height: 36px;width: 188px;margin: auto;margin-top: 89px;
border-radius: 18px; color: #FFFFFF;font-weight: bold;font-size: 19px;font-family:auto;border-radius: 18px;">
      退出
    </div>
    <!-- 显示遮罩层 -->
    <van-overlay :show="show" style=" ">
      <div class="wrapper">
        <div class="block">
          <div id=""
            style="margin: 23px 0px 28px 0px;font-size: 17px;font-family: auto;font-weight: bold;color: #000000;">
            提示
          </div>
          <div id="" style="margin-bottom: 23px;font-size: 14px;font-family:  auto;font-weight: bold;color: #000000;">
            {{title}}
          </div>
          <div class="flex-c" @click="isshow"
            style="width: 271px;height: 38px;background: #FF0000;
					border-radius: 5px;font-size: 16px;margin: 0px 21px;margin-bottom: 24px;font-family: auto;font-weight: 500;color: #FFFFFF;">
            确认
          </div>
        </div>
      </div>
    </van-overlay>


    <van-popup v-model="message">
      <van-uploader :after-read="afterRead" />
    </van-popup>
  </div>
</template>
<script>
  import Cookies from 'js-cookie'
  import {
    gzhLogin,
    GetUserBinding,
  } from '@/api/my/gzhLogin.js'
  import {
    UploadFiles
  } from '@/api/my/UploadFiles.js' 
  // import {wxLogin,getUrlParam} from '@/api/my/wxlogo.js'

  export default {
    data() {
      return {
        user: {},
        message: false, //显示的修改头像的弹窗
        show: false, //控制微信绑定弹窗
        title: '',
        success: false,
        title: '您已绑定过该微信号,不能重复绑定',
      }
    },
    created() {
      this.user = JSON.parse(localStorage.getItem('user'));
      // http://mobile.xhm2006.com/my?success=false&message=请求用户信息失败
      var hisrouter = this.$router;
      console.log(hisrouter, 'hisrouter')
      this.success = hisrouter.history.current.query.success;
      this.title = hisrouter.history.current.query.message;
      if (this.success) {
        this.title = hisrouter.history.current.query.message;
        this.show = true;
      }

    },
    methods: {
      isshow() {
        this.show = false;
      },
      // 微信登录
      wxlogin() {
        // 判断是否已经绑定微信号
        GetUserBinding().then(res => {
          // 绑定过
          // if (res.message == 'false') {
          //   this.gzhLogin(); //未绑定去绑定
          // } else {
          //   this.show = true; //弹窗提示已经绑定过
          // }
          if (res.success) {
            this.title = '您已绑定过该微信号,不能重复绑定';
            this.show = true; //弹窗提示已经绑定过
            return;
          } else {
            this.gzhLogin(); //未绑定去绑定
          }
        })
        gzhLogin().then(res => {
          console.log(res, 'res')
          if (res.success) { //成功
            window.location.href = res.data;
            // uni.navigateTo({
            //   url: res.data
            // })
            // window.localStorage.setItem('title', this.title)
            // Toast(window.location.href = res.data)
          } else { //失败
            Toast(res.message);
          }

        })
      },
      outlogo() {
        this.$store.dispatch('user/logout').then(res => {
          window.localStorage.clear();
          this.$router.push(`/login?redirect=${this.$route.fullPath}`)
        })

      },
      seleword() {
        this.$router.push({
          path: '/Password',
          query: {}
        })
      },
      givepay() {
        this.$router.push({
          path: '/paymony',
          query: {}
        })
      },
      // 修改用户信息
      // selemessage() {
      //   this.message = true
      // },
      afterRead(file) {
        // 此时可以自行将文件上传至服务器
        console.log(file);
        console.log(localStorage.getItem('user'), '111')
        let ids = JSON.parse(localStorage.getItem('user')).id;
        UploadFiles({
          file:file.file,
          id:ids
        }).then(res => {
          console.log(res, '修改信息chenge')
        })
      },
    }
  }
</script>
<style>
  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .block {
    /* width: 312px; */
    /* height: 100px; */
    text-align: center;
    margin: 0px 31px;
    background: #FFFFFF;
    border-radius: 5px;
  }

  .van-col {
    font-size: 13px;
    font-family: emoji;
  }

  .my {
    margin: 0px 15px;
    height: 100vh;
  }

  .bg-f {
    border-radius: 5px;
    background-color: #FFFFFF;
  }
</style>
